<template>
  <div style="position: relative">
    <div style="position: sticky;top: 0;z-index: 999;padding-top: 20px;background-color: white;padding-bottom: 20px">
      <div class="table_Header">
        <el-row :gutter="24">
          <el-col :span="3">
            <div class="align_items">
              <span style="text-align: center" class="table_HeaderTitle">充值日期</span>
            </div>
          </el-col>

          <el-col :span="2">
            <div class="justify_left">
              <span class="table_HeaderTitle">客户名称</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="align_items">
              <span class="table_HeaderTitle">手机</span>
            </div>
          </el-col>
<!--          <el-col :span="2">-->
<!--            <div class="align_items">-->
<!--              <span class="table_HeaderTitle">会员Id</span>-->
<!--            </div>-->
<!--          </el-col>-->
          <el-col :span="2">
            <div class="align_items">
              <span class="table_HeaderTitle">充值金额</span>
            </div>
          </el-col>
<!--          <el-col :span="2">-->
<!--            <div class="align_items">-->
<!--              <span class="table_HeaderTitle">当前余额</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="align_items">-->
<!--              <span style="text-align: center" class="table_HeaderTitle">收入金额</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="align_items">-->
<!--              <span style="text-align: center" class="table_HeaderTitle">支出金额</span>-->
<!--            </div>-->
<!--          </el-col>-->
          <el-col :span="5">
            <div class="align_items">
              <span style="text-align: center" class="table_HeaderTitle">摘要</span>
            </div>
          </el-col>
<!--          <el-col :span="3">-->
<!--            <div class="align_items">-->
<!--              <span style="text-align: center" class="table_HeaderTitle">结束时间</span>-->
<!--            </div>-->
<!--          </el-col>-->
          <el-col :span="2">
            <div class="align_items">
              <span style="text-align: center" class="table_HeaderTitle">订单状态</span>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="justify_right">
              <span class="table_HeaderTitle">操作</span>
            </div>
          </el-col>

        </el-row>
      </div>
    </div>
    <div class="table_List" v-for="item in orderForm">
<!--      <div class="table_ListHeader">-->
<!--        <div class="align_items">-->
<!--          <span class="table_ListHeaderTitle">订单号：{{item.sn}}</span>-->
<!--        </div>-->
<!--        <div class="align_items">-->
<!--          <span class="table_ListHeaderTitle">配送方式：{{item.shippingMethod | watchShippingMethod}}</span>-->
<!--        </div>-->
<!--      </div>-->
      <div style="padding: 10px">
        <el-row :gutter="24">
          <el-col :span="3">
            <div class="justify_left shop_Height">
              <span style="text-align: left" class="table_ContentTitle">{{item.createDate |datetimeFormatter}}</span>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="justify_left shop_Height">
              <span style="text-align: left" class="table_ContentTitle">{{item.name}}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="justify_left shop_Height">
              <span style="text-align: left" class="table_ContentTitle" >{{item.mobile}}</span>
            </div>
          </el-col>
<!--          <el-col :span="2">-->
<!--            <div class="justify_left shop_Height">-->
<!--              <span style="text-align: left" class="table_ContentTitle">{{item.memberId}}</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          充值金额-->
          <el-col :span="2">
            <div class="justify_left shop_Height">
              <span style="text-align: left" class="table_ContentTitle">{{item.credit}}</span>
            </div>
          </el-col>
<!--          <el-col :span="2">-->
<!--            <div class="justify_left shop_Height">-->
<!--              <span style="text-align: left" class="table_ContentTitle">{{item.balance}}</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          收入金额-->
<!--          <el-col :span="2">-->
<!--            <div class="justify_left shop_Height">-->
<!--              <span style="text-align: center" class="table_ContentTitle">{{item.credit}}</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          支出-->
<!--          <el-col :span="2">-->
<!--            <div class="justify_left shop_Height">-->
<!--              <span style="text-align: center" class="table_ContentTitle">{{item.debit}}</span>-->
<!--            </div>-->
<!--          </el-col>-->
          <el-col :span="5">
            <div class="justify_left shop_Height">
              <span style="text-align: center" class="table_ContentTitle">{{item.memo}}</span>
            </div>
          </el-col>
<!--          <el-col :span="3">-->
<!--            <div class="justify_left shop_Height">-->
<!--              <span style="text-align: left" class="table_ContentTitle">{{item.modifyDate |datetimeFormatter}}</span>-->
<!--            </div>-->
<!--          </el-col>-->
          <el-col :span="2">
            <div class="justify_left shop_Height">
              <span style="text-align: center" class="table_ContentTitle" v-if="item.status == 0">待审核</span>
              <span style="text-align: center" class="table_ContentTitle" v-if="item.status == 1">已确认</span>
              <span style="text-align: center" class="table_ContentTitle" v-if="item.status == 2">已完成</span>
              <span style="text-align: center" class="table_ContentTitle" v-if="item.status == 3" >已关闭</span>
            </div>
          </el-col>

          <el-col :span="2">
            <div class="justify_right shop_Height" @click="detailsClick(item)">
              <a class="details_Title">订单详情</a>
            </div>
<!--            <div class="justify_right shop_Height" @click="Rechargeclick(item)">-->
<!--              <a class="details_Title">充值</a>-->
<!--            </div>-->
          </el-col>



        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: [
    'orderForm'
  ],
  methods: {
    detailsClick(item) {
      console.log(item)
      // this.$emit('detailsClick', id)
      this.$emit('detailsClick', item)
    },
    // 充值
    // Rechargeclick(id) {
    //   this.$emit('Rechargeclick', id)
    // }
  },
  filters: {
    watchStatus(val) {
      if (val == 0) {
        return '待付款'
      } else if (val == 1) {
        return '已付款'
      } else if (val == 2) {
        return '待退款'
      } else if (val == 3) {
        return '已退款'
      }
    },
    watchDiscount (val) {
      if (val === undefined) {
        return 0
      } else {
        return val
      }
    },
    watchShippingMethod(val){
      if (val == 0) {
        return '普通快递'
      } else if (val == 1) {
        return '到店提货'
      } else if (val == 2) {
        return '同城配送'
      } else {
        return '待发货'
      }
    },
  }
}
</script>

<style scoped>
.table_Header {
  width: 100%;
  background-color: #f5f7fa;
  padding: 10px;
}

.table_HeaderTitle {
  font-size: 12px;
  color: #353535;
  font-weight: 600;
}

.table_List {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #f2f2f2;
}

.table_ListHeader {
  width: 100%;
  padding: 10px;
  background-color: #f5f7fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table_ListHeaderTitle {
  font-size: 12px;
  color: #888888;
}

.align_items {
  display: flex;
  align-items: center;
  justify-content: center;
}

.justify_left {
  display: flex;
  align-items: center;
}

.justify_right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.table_ContentTitle {
  font-size: 12px;
  color: #353535;
  width: 100%;
  text-align: center;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop_Height {
  min-height: 30px;
}

.details_Title {
  font-size: 14px;
  color: #409EFF;
}
</style>



<!--<template>-->
<!--  <div style="position: relative">-->
<!--    <div style="position: sticky;top: 0;z-index: 999;padding-top: 20px;background-color: white;padding-bottom: 20px">-->
<!--      <div class="table_Header">-->
<!--        <el-row :gutter="24">-->
<!--          <el-col :span="2">-->
<!--            <div class="justify_left">-->
<!--              <span class="table_HeaderTitle">销售日期</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="align_items">-->
<!--              <span class="table_HeaderTitle">客户名称</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="align_items">-->
<!--              <span class="table_HeaderTitle">客户编号</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="3">-->
<!--            <div class="align_items">-->
<!--              <span class="table_HeaderTitle">仓库名称</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="align_items">-->
<!--              <span class="table_HeaderTitle">状态</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="align_items">-->
<!--              <span class="table_HeaderTitle">商品总数</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="align_items">-->
<!--              <span style="text-align: center" class="table_HeaderTitle">商品金额</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="align_items">-->
<!--              <span style="text-align: center" class="table_HeaderTitle">店铺优惠</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="align_items">-->
<!--              <span style="text-align: center" class="table_HeaderTitle">实付金额</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="3">-->
<!--            <div class="justify_left">-->
<!--              <span class="table_HeaderTitle">创建时间</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="justify_right">-->
<!--              <span class="table_HeaderTitle">操作</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="table_List" v-for="item in orderForm">-->
<!--      <div class="table_ListHeader">-->
<!--        <div class="align_items">-->
<!--          <span class="table_ListHeaderTitle">订单号：{{item.sn}}</span>-->
<!--        </div>-->
<!--        <div class="align_items">-->
<!--          <span class="table_ListHeaderTitle">配送方式：{{item.shippingMethod | watchShippingMethod}}</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div style="padding: 10px">-->
<!--        <el-row :gutter="24">-->
<!--          <el-col :span="2">-->
<!--            <div class="justify_left shop_Height">-->
<!--              <span style="text-align: left" class="table_ContentTitle">{{item.orderDate | dateFormatter}}</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;" class="shop_Height">-->
<!--              <span class="table_ContentTitle">{{item.memberName}}</span>-->
<!--              <span style="margin-top: 5px;" class="table_ContentTitle">{{item.memberMobile}}</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--              <el-col :span="2">-->
<!--            <div class="align_items shop_Height">-->
<!--              <span class="table_ContentTitle">{{item.memberCode}}</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="3">-->
<!--            &lt;!&ndash; <div style="display: flex;flex-direction: column;justify-content: center" class="shop_Height">-->
<!--              <span class="table_ContentTitle">{{item.consignee}} {{item.phone}}</span>-->
<!--              <el-tooltip class="item" effect="dark" :content="item.address" placement="top">-->
<!--                <span style="margin-top: 5px" class="table_ContentTitle">{{item.address}}</span>-->
<!--              </el-tooltip>-->
<!--            </div> &ndash;&gt;-->
<!--			<div class="align_items shop_Height">-->
<!--			  <span class="table_ContentTitle">{{item.shopName}}</span>-->
<!--			</div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="align_items shop_Height">-->
<!--              <span class="table_ContentTitle">{{item.statusDescr}}</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="align_items shop_Height">-->
<!--              <span class="table_ContentTitle">{{item.subQuantity}}</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="justify_left shop_Height">-->
<!--              <span class="table_ContentTitle">{{item.subPrice}}</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="justify_left shop_Height">-->
<!--              <span class="table_ContentTitle">{{item.discount | watchDiscount}}</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="justify_left shop_Height">-->
<!--              <span class="table_ContentTitle">{{item.amountPaid}}</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="3">-->
<!--            <div class="justify_left shop_Height">-->
<!--              <span style="text-align: left" class="table_ContentTitle">{{item.createDate | datetimeFormatter}}</span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="2">-->
<!--            <div class="justify_right shop_Height" @click="detailsClick(item.id)">-->
<!--              <a class="details_Title">订单详情</a>-->
<!--            </div>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--  export default {-->
<!--    data() {-->
<!--      return {}-->
<!--    },-->
<!--    props: [-->
<!--      'orderForm'-->
<!--    ],-->
<!--    methods: {-->
<!--      detailsClick(id) {-->
<!--        this.$emit('detailsClick', id)-->
<!--      }-->
<!--    },-->
<!--    filters: {-->
<!--      watchStatus(val) {-->
<!--        if (val == 0) {-->
<!--          return '待付款'-->
<!--        } else if (val == 1) {-->
<!--          return '已付款'-->
<!--        } else if (val == 2) {-->
<!--          return '待退款'-->
<!--        } else if (val == 3) {-->
<!--          return '已退款'-->
<!--        }-->
<!--      },-->
<!--      watchDiscount (val) {-->
<!--        if (val === undefined) {-->
<!--          return 0-->
<!--        } else {-->
<!--          return val-->
<!--        }-->
<!--      },-->
<!--      watchShippingMethod(val){-->
<!--        if (val == 0) {-->
<!--          return '普通快递'-->
<!--        } else if (val == 1) {-->
<!--          return '到店提货'-->
<!--        } else if (val == 2) {-->
<!--          return '同城配送'-->
<!--        } else {-->
<!--          return '待发货'-->
<!--        }-->
<!--      },-->
<!--    }-->
<!--  }-->
<!--</script>-->

<!--<style scoped>-->
<!--  .table_Header {-->
<!--    width: 100%;-->
<!--    background-color: #f5f7fa;-->
<!--    padding: 10px;-->
<!--  }-->

<!--  .table_HeaderTitle {-->
<!--    font-size: 12px;-->
<!--    color: #353535;-->
<!--    font-weight: 600;-->
<!--  }-->

<!--  .table_List {-->
<!--    width: 100%;-->
<!--    margin-bottom: 20px;-->
<!--    border: 1px solid #f2f2f2;-->
<!--  }-->

<!--  .table_ListHeader {-->
<!--    width: 100%;-->
<!--    padding: 10px;-->
<!--    background-color: #f5f7fa;-->
<!--    display: flex;-->
<!--    justify-content: space-between;-->
<!--    align-items: center;-->
<!--  }-->

<!--  .table_ListHeaderTitle {-->
<!--    font-size: 12px;-->
<!--    color: #888888;-->
<!--  }-->

<!--  .align_items {-->
<!--    display: flex;-->
<!--    align-items: center;-->
<!--    justify-content: center;-->
<!--  }-->

<!--  .justify_left {-->
<!--    display: flex;-->
<!--    align-items: center;-->
<!--  }-->

<!--  .justify_right {-->
<!--    display: flex;-->
<!--    align-items: center;-->
<!--    justify-content: flex-end;-->
<!--  }-->

<!--  .table_ContentTitle {-->
<!--    font-size: 12px;-->
<!--    color: #353535;-->
<!--    width: 100%;-->
<!--    text-align: center;-->
<!--    display: block;-->
<!--    overflow: hidden;-->
<!--    text-overflow: ellipsis;-->
<!--    white-space: nowrap;-->
<!--  }-->

<!--  .shop_Height {-->
<!--    min-height: 30px;-->
<!--  }-->

<!--  .details_Title {-->
<!--    font-size: 14px;-->
<!--    color: #409EFF;-->
<!--  }-->
<!--</style>-->
